<!-- /templates/customers/order.liquid -->

<div class="page-width page-container">

  <header class="section-header">
    <h1>{{ 'customer.account.title' | t }}</h1>
    <p><a href="{{ routes.account_url }}">{{ 'customer.account.return' | t }}</a></p>
  </header>

  <h2>{{ 'customer.order.title' | t: name: order.name }}</h2>

  <p>{{ 'customer.order.date' | t: date: order.created_at | date: format: 'date_at_time' }}</p>

  {%- if order.cancelled -%}
    <div class="order--cancelled">
      {%- assign cancelled_at = order.cancelled_at | date: format: 'date_at_time' -%}
      <p>{{ 'customer.order.cancelled' | t: date: cancelled_at }}</p>
      <p>{{ 'customer.order.cancelled_reason' | t: reason: order.cancel_reason }}</p>
    </div>
  {%- endif -%}

  <table class="order-table">
    <thead>
      <tr>
        <th scope="col">{{ 'customer.order.product' | t }}</th>
        <th scope="col">{{ 'customer.order.sku' | t }}</th>
        <th class="text-right" scope="col">{{ 'customer.order.price' | t }}</th>
        <th class="text-right" scope="col">{{ 'customer.order.quantity' | t }}</th>
        <th class="text-right" scope="col">{{ 'customer.order.total' | t }}</th>
      </tr>
    </thead>
    <tbody>
      {%- for line_item in order.line_items -%}
        <tr id="{{ line_item.key }}">
          <th class="order-table__product" scope="row" data-label="{{ 'customer.order.product' | t }}">
            <div>
              {{ line_item.title | link_to: line_item.product.url }}
              {%- if line_item.line_level_discount_allocations != blank -%}
                <ul class="order-discount order-discount--list order-discount--title" aria-label="{{ 'customer.order.discount' | t }}">
                  {%- for discount_allocation in line_item.line_level_discount_allocations -%}
                    <li class="order-discount__item">
                      <span class="icon icon-saletag" aria-hidden="true"></span>{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})
                    </li>
                  {%- endfor -%}
                </ul>
              {%- endif -%}
            </div>
            {%- if line_item.fulfillment -%}
              <div class="note">
                {%- assign created_at = line_item.fulfillment.created_at | date: format: 'date' -%}
                {{ 'customer.order.fulfilled_at' | t: date: created_at }}
                <div>
                  {%- if line_item.fulfillment.tracking_url -%}
                    <a href="{{ line_item.fulfillment.tracking_url }}">
                      {{ 'customer.order.track_shipment' | t }}
                    </a>
                  {%- endif -%}
                  <div>
                    {{ line_item.fulfillment.tracking_company }}
                    {%- if line_item.fulfillment.tracking_number -%} #{{ line_item.fulfillment.tracking_number }} {%- endif -%}
                  </div>
                </div>
              </div>
            {%- endif -%}
          </th>
          <td data-label="{{ 'customer.order.sku' | t }}">{{ line_item.sku }}</td>
          <td class="text-right" data-label="{{ 'customer.order.price' | t }}">
            {%- if line_item.original_price != line_item.final_price -%}
              <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
              <del>{{ line_item.original_price | money }}</del>
              <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
              <span class="order-discount">{{ line_item.final_price | money }}</span>
            {%- else -%}
              {{ line_item.original_price | money }}
            {%- endif -%}
            {%- if line_item.unit_price_measurement -%}
              {% include 'product-unit-price', variant: line_item, available: true %}
            {%- endif -%}
          </td>
          <td class="text-right" data-label="{{ 'customer.order.quantity' | t }}">{{ line_item.quantity }}</td>
          <td class="text-right" data-label="{{ 'customer.order.total' | t }}">
            {%- if line_item.original_line_price != line_item.final_line_price -%}
              <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
              <del>{{ line_item.original_line_price | money }}</del>
              <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
              <span class="order-discount">{{ line_item.final_line_price | money }}</span>
            {%- else -%}
              {{ line_item.original_line_price | money }}
            {%- endif -%}
          </td>
        </tr>
      {%- endfor -%}
    </tbody>
    <tfoot>
      <tr>
        <th class="small--hide" scope="row" colspan="4">{{ 'customer.order.subtotal' | t }}</th>
        <td class="text-right" data-label="{{ 'customer.order.subtotal' | t }}">{{ order.line_items_subtotal_price | money }}</td>
      </tr>

      {%- if order.cart_level_discount_applications != blank -%}
        <tr class="order-discount__line">
          {%- for discount_application in order.cart_level_discount_applications -%}
            <th class="small--hide" scope="row" colspan="4">
              {{ 'customer.order.discount' | t }}
              <span class="order-discount order-discount--title">
                <span class="icon icon-saletag" aria-hidden="true"></span>{{- discount_application.title -}}
              </span>
            </th>
            <td class="text-right" data-label="{{ 'customer.order.discount' | t }}">
              <div class="order-discount-wrapper">
                <span class="order-discount order-discount--title text-left medium-up--hide">
                  <span class="icon icon-saletag" aria-hidden="true"></span>{{- discount_application.title -}}
                </span>
                <span class="order-discount">-{{ discount_application.total_allocated_amount | money }}</span>
              </div>
            </td>
          {%- endfor -%}
        </tr>
      {%- endif -%}

      {%- for shipping_method in order.shipping_methods -%}
        <tr>
          <th class="small--hide" scope="row" colspan="4">{{ 'customer.order.shipping' | t }} ({{ shipping_method.title }})</th>
          <td class="text-right" data-label="{{ 'customer.order.shipping' | t }} ({{ shipping_method.title }})">{{ shipping_method.price | money }}</td>
        </tr>
      {%- endfor -%}

      {%- for tax_line in order.tax_lines -%}
        <tr>
          <th class="small--hide" scope="row" colspan="4">{{ 'customer.order.tax' | t }} ({{ tax_line.title }} {{ tax_line.rate | times: 100 }}%)</th>
          <td class="text-right" data-label="{{ 'customer.order.tax' | t }} ({{ tax_line.title }} {{ tax_line.rate | times: 100 }}%)">{{ tax_line.price | money }}</td>
        </tr>
      {%- endfor -%}

      <tr>
        <th class="h3 small--hide" scope="row" colspan="4">{{ 'customer.order.total' | t }}</th>
        <td class="h3 text-right" data-label="{{ 'customer.order.total' | t }}">{{ order.total_price | money }} {{ order.currency }}</td>
      </tr>
    </tfoot>
  </table>

  <hr class="hr--clear">

  <div class="grid">
    <div class="grid__item one-half">
      <h3>{{ 'customer.order.billing_address' | t }}</h3>

      <p><strong>{{ 'customer.order.payment_status' | t }}:</strong> {{ order.financial_status_label }}</p>

      {{ order.billing_address | format_address }}

    </div>
    <div class="grid__item one-half">
      <h3>{{ 'customer.order.shipping_address' | t }}</h3>

      <p><strong>{{ 'customer.order.fulfillment_status' | t }}:</strong> {{ order.fulfillment_status_label }}</p>

      {{ order.shipping_address | format_address }}

    </div>
  </div>

</div>
